<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :isDetail="true"
    :showDetailBack="false"
    @ok="handleSubmit"
    @close="clearTable"
  >
    <BasicTable
      v-for="(table, index) in tableListRef"
      :key="index"
      :title="table.title"
      :columns="table.columns"
      :dataSource="table.dataSource"
    />
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { importProductExcel } from '/@/api/plm/customer/customer';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicTable } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';

  const emit = defineEmits(['success', 'register']);
  const { createMessage } = useMessage();
  let tableListRef = ref<
    {
      title: string;
      columns?: any[];
      dataSource?: any[];
    }[]
  >([]);
  const [registerDrawer, { closeDrawer, setDrawerProps }] = useDrawerInner(async (data) => {
    tableListRef.value = data.tableList;
    setDrawerProps({ confirmLoading: false });
    console.log('tableListRef.value', tableListRef.value);
  });
  function clearTable() {
    tableListRef.value = [];
    console.log('tableListRef.value', tableListRef.value);
  }
  // debugger;
  async function handleSubmit() {
    try {
      setDrawerProps({ confirmLoading: true });
      const data = await importProductExcel(tableListRef.value[0].dataSource);
      if (data.code === 0) {
        createMessage.success(data.message);
      } else {
        createMessage.error(data.message);
      }
      closeDrawer();
      emit('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }
</script>
